<template>
  <el-row :gutter="10">
    <!-- 会话列表 -->
    <el-col :span="6">
      <ContentWrap>
        <el-descriptions :column="1" title="告警信息">
          <el-descriptions-item label="告警时间">{{ formatDate(new Date(formData.alertTime)) }}</el-descriptions-item>
          <el-descriptions-item label="威胁名称">{{ formData.threatName }}</el-descriptions-item>
          <el-descriptions-item label="威胁类型">{{ formData.attackType }}</el-descriptions-item>
          <el-descriptions-item label="威胁等级">
            <dict-tag :type="DICT_TYPE.RESEARCH_THREAT_LEVEL" :value="formData.threatLevel!" />
          </el-descriptions-item>
          <el-descriptions-item label="源IP">{{ formData.sourceIp }}</el-descriptions-item>
          <el-descriptions-item label="源端口">{{ formData.sourcePort }}</el-descriptions-item>
          <el-descriptions-item label="目的IP">{{ formData.destIp }}</el-descriptions-item>
          <el-descriptions-item label="目的端口">{{ formData.destPort }}</el-descriptions-item>
<!--          <el-descriptions-item label="XFF">{{ formData.xff }}</el-descriptions-item>-->
<!--          <el-descriptions-item label="告警设备IP">{{ formData.xff }}</el-descriptions-item>-->
<!--          <el-descriptions-item label="威胁阶段">{{ formData.xff }}</el-descriptions-item>-->
<!--          <el-descriptions-item label="攻击结果">{{ formData.xff }}</el-descriptions-item>-->
<!--          <el-descriptions-item label="风险危害">{{ formData.direction }}</el-descriptions-item>-->
<!--          <el-descriptions-item label="威胁详情">{{ formData.remark }}</el-descriptions-item>-->
<!--          <el-descriptions-item label="威胁描述">{{ formData.sourceIp }}</el-descriptions-item>-->
<!--          <el-descriptions-item label="解决方案">{{ formData.sourceIp }}</el-descriptions-item>-->
        </el-descriptions>
      </ContentWrap>
    </el-col>
    <!-- 会话详情（选中会话的消息列表） -->
    <el-col :span="18">
      <ContentWrap>
        <KeFuMessageList ref="keFuChatBoxRef" />
      </ContentWrap>
    </el-col>
<!--    <el-col :span="4">
      <ContentWrap>
        右侧
      </ContentWrap>
    </el-col>-->
  </el-row>
</template>

<script lang="ts" setup>
import { KeFuConversationList, KeFuMessageList } from './components'
import { KeFuConversationRespVO } from '@/api/mall/promotion/kefu/conversation'
import { getAccessToken } from '@/utils/auth'
import {DICT_TYPE} from "@/utils/dict";
import {AlertApi} from "@/api/research/alert";
import {formatDate} from "@/utils/formatTime";

defineOptions({ name: 'KeFu' })

const message = useMessage() // 消息弹窗

// ======================= WebSocket start =======================
const server = ref(
  (import.meta.env.VITE_BASE_URL + '/infra/ws').replace('http', 'ws') + '?token=' + getAccessToken()
) // WebSocket 服务地址

const formData = ref({
  id: undefined,
  xff: undefined,
  url: undefined,
  alertTime: undefined,
  threatName: undefined,
  threatLevel: undefined,
  direction: undefined,
  sourceIp: undefined,
  sourceIpLong: undefined,
  destIp: undefined,
  destIpLong: undefined,
  statusCode: undefined,
  status: undefined,
  remark: undefined,
  syslogId: undefined, // syslog ID
  attackType: undefined, // 威胁类型
  sourcePort: undefined, // 源端口
  destPort: undefined, // 目的端口
  analyzeStep: undefined, // 分析步骤
  attackStatus: undefined, // 是否是攻击（0否 1是）
})

const { params } = useRoute() // 查询参数

/** 加载指定会话的消息列表 */
const keFuChatBoxRef = ref<InstanceType<typeof KeFuMessageList>>()

const id = params.id as unknown as number
const getDetail = async () => {
  if (id) {
    formData.value = await AlertApi.getAlert(id)
    keFuChatBoxRef.value?.getMessageList(formData, true)
  }
}

/** 初始化 */
onMounted(async () => {
  //getConversationList()
  // 打开 websocket 连接
  //open()
  await getDetail()
})

/** 销毁 */
onBeforeUnmount(() => {
  // 关闭 websocket 连接
  //close()
})
</script>

<style lang="scss">
.kefu {
  height: calc(100vh - 165px);
  overflow: auto; /* 确保内容可滚动 */
}

/* 定义滚动条样式 */
::-webkit-scrollbar {
  width: 10px;
  height: 6px;
}

/* 定义滚动条轨道 内阴影+圆角 */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 0 rgba(240, 240, 240, 0.5);
  border-radius: 10px;
  background-color: #fff;
}

/* 定义滑块 内阴影+圆角 */
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  box-shadow: inset 0 0 0 rgba(240, 240, 240, 0.5);
  background-color: rgba(240, 240, 240, 0.5);
}
</style>
